<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>quilljs</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>

    <script type="text/javascript">
        Vue.use(window.VueQuillEditor)
    </script>
</head>
<body>
<div id="app">
    <div v-html="content"></div>


    <div>
        <quill-editor
                ref="myQuillEditor"
                :content="content"
                :options="editorOption"
                @change="onEditorChange($event)"
        />
    </div>



</div>

<!-- Initialize Quill editor -->
<script>

    new Vue({
        el: '#app',
        data () {
            return {
                content: '<h2>I am Examplsse</h2>',
                editorOption: {
                    // Some Quill options...
                }
            }
        },
        methods: {
            onEditorBlur(quill) {
                console.log('editor blur!', quill)
            },
            onEditorFocus(quill) {
                console.log('editor focus!', quill)
            },
            onEditorReady(quill) {
                console.log('editor ready!', quill)
            },
            onEditorChange({ quill, html, text }) {
                console.log('editor change!', quill, html, text)
                this.content = html
            }
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            }
        },
        mounted() {
            console.log('this is current quill instance object', this.editor)
        }
    })
</script>

</body>
</html>